import React, { Component } from 'react'
import { Button, Form, Input } from "antd-mobile";
import Headers from '../../components/Header/Header'
import './Login.less'
import logo from '../../assets/img/login_logo.png'
import {connect} from 'react-redux'
import {actions, getUser} from '../../store/modules/login'
import {bindActionCreators} from 'redux'

 class Login extends Component {
  render() {
    let {user,loginFn:{changeUser,doLogin},history:{push}}=this.props;
    return (
      <div className='login'>
        <Headers back title='登录' register></Headers>
        <div>{JSON.stringify(user)}</div>
        <div className='form'>
         <div className='logo'>
           <img src={logo} alt="" />
         </div>
        <Form layout="horizontal">
          <Form.Item label="手机号" name="phone">
            <Input
              placeholder="请输入手机号"
              clearable
              //   defaultValue={user.phone}
            onChange={(e)=>changeUser('phone',e)}/>
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              //   defaultValue={user.password}
              onChange={(e)=>changeUser('password',e)}/>
          </Form.Item>
        </Form>

        <div className="text-center">
          <Button color="primary" onClick={()=>doLogin(push)}>登录</Button>
        </div>
        </div>
      </div>
    )
  }
}

// 取数据
const mapStateToProps=state=>{
  return {
    user:getUser(state),
  }
}
// 取方法
const mapDispatchToProps=dispatch=>{
  return {
      loginFn:bindActionCreators(actions,dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Login)
